<?php $activePage = "gridFix"; ?>
<?php include("includes/header.php"); ?>	
<!-- container -->
<div class="fixContainer">			
	<div class="row">
		<div class="g12">
			<h2 class="h2">Grid</h2>
			<hr />
		</div>
	</div>

	<div class="row">
		<div class="g8">
			<h3 class="h3">Completly Fluid</h3>
			
			<!-- Grid Example -->
			<div class="row">
				<div class="g12">
					<div class="panel">
						<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="g6">
					<div class="panel">
						<p>Six columns</p>
					</div>
				</div>
				<div class="g6">
					<div class="panel">
						<p>Six columns</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="g4">
					<div class="panel">
						<p>Four columns</p>
					</div>
				</div>
				<div class="g4">
					<div class="panel">
						<p>Four columns</p>
					</div>
				</div>
				<div class="g4">
					<div class="panel">
						<p>Four columns</p>
					</div>
				</div>
			</div>
		</div>
		<div class="g4">
			<h4 class="h4">Page info</h4>
			<p>In this page you can learn how to create columns on paraGRIDma v2.</p>
			
			<h4 class="h4">Panel Types</h4>
			<p>You can create several types of panels:</p>
			<ul class="disc">
				<li>
					<strong>Completly Fluid</strong><br />
					<p>They must have a class from <strong>g1</strong> to <strong>g12</strong>.<br />
					They must be inside of a &lt;div class="row"&gt;</p>
				</li>
				<li><strong>Fluid keeping columns</strong><br />
					<p>Each element inmediatly inside this panel will be display as a colum<br />
					The parent div must have a class: <strong>bg1, bg2, bg3, bg4 or bg5</strong>
					</p>
				</li>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="g8">
				<h3 class="h3">Conditonals Panels</h3>
				
				<p class="show-on-phones">This panel is only visible on phones</p>
				<p class="hide-on-phones">This panel is only hidden on phones</p>
				
				<p class="show-on-desktops">This panel is only visible on desktops</p>
				<p class="hide-on-desktops">This panel is only hidden on desktops</p>
				
				<h3 class="h3">Fluid keeping columns <small>(break on mobile)</small></h3>
				<h5 class="h5">Two-up</h5>
				<ul class="bg2 mobile">
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
				</ul>
				<h5 class="h5">Four-up</h5>
				<ul class="bg4 mobile">
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
				</ul>
				<h3 class="h3">Fluid keeping columns <small>(even on mobile)</small></h3>
				<h5 class="h5">Two-up</h5>
				<ul class="bg2">
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
				</ul>
				<h5 class="h5">Four-up</h5>
				<ul class="bg4">
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
					<div><div class="colPanel">Two-up element</div></div>
				</ul>
		</div>
		<div class="g4">
			<h4 class="h4">Fluid keeping columns info</h4>
			<ul class="disc">
				<li>empty</li>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="g8">				
				<h3 class="h3">Fixed Block (always)</h3>
				<div class="pf pf_g200">
					<div class="pf_fix">
						<img src="images/test_180.jpg" />
					</div>
					<div class="pf_fluid">
						FLUID: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus, ac egestas augue laoreet a. Quisque varius ligula non est porta sit amet dictum orci consequat. Morbi pellentesque luctus ligula, sit amet vehicula sapien imperdiet a. Suspendisse sed lacus at eros tristique vehicula eget sit amet sem. 
					</div>
					<div class="cb"></div>
				</div>
				<hr />
				<div class="pf_r pf_g200">
					<div class="pf_fix">
						<img src="images/test_180.jpg" />
					</div>
					<div class="pf_fluid">
						FLUID: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus, ac egestas augue laoreet a. Quisque varius ligula non est porta sit amet dictum orci consequat. Morbi pellentesque luctus ligula, sit amet vehicula sapien imperdiet a. Suspendisse sed lacus at eros tristique vehicula eget sit amet sem. 
					</div>
					<div class="cb"></div>
				</div>
				<hr />
				
				
				<h3 class="h3">Fixed Block (break on mobile)</h3>
				<div class="pf pf_g200 break-on-mobile">
					<div class="pf_fix">
						<img src="images/test_180.jpg" />
					</div>
					<div class="pf_fluid">
						FLUID: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus, ac egestas augue laoreet a. Quisque varius ligula non est porta sit amet dictum orci consequat. Morbi pellentesque luctus ligula, sit amet vehicula sapien imperdiet a. Suspendisse sed lacus at eros tristique vehicula eget sit amet sem. 
					</div>
					<div class="cb"></div>
				</div>
				<hr />
				
				<div class="pf_r pf_g200 break-on-mobile">
					<div class="pf_fix">
						<img src="images/test_180.jpg" />
					</div>
					<div class="pf_fluid">
						FLUID: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus, ac egestas augue laoreet a. Quisque varius ligula non est porta sit amet dictum orci consequat. Morbi pellentesque luctus ligula, sit amet vehicula sapien imperdiet a. Suspendisse sed lacus at eros tristique vehicula eget sit amet sem. 
					</div>
					<div class="cb"></div>
				</div>
				<hr />
		</div>
		<div class="g4">
			<h4 class="h4">Fixed Block info</h4>
			
			<ul class="disc">
				<li>empty</li>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="g8">		
			<h3 class="h3">Centered Panels</h3>
			<div class="row">
				<div class="g8 centered">
					<div class="panel">8 columns CENTERED</div>
				</div>
			</div>
			<div class="row">
				<div class="g6 centered">
					<div class="panel">6 columns CENTERED</div>
				</div>
			</div>
			<div class="row">
				<div class="g4 centered">
					<div class="panel">4 columns CENTERED</div>
				</div>
			</div>
		</div>
		<div class="g4">
			<h4 class="h4">Centered Panels info</h4>
			
			<ul class="disc">
				<li>empty</li>
			</ul>
		</div>
	</div>
</div> <!-- container -->
<?php include("includes/footer.php"); ?>	
